[lookingGlass] Add style information to the picker

Currently the picker displays information on the hovered actor's
position and the object itself. Adding style id and class of
StWidgets to the displayed information can be very helpful for
identifying a particular actor or code segment.

https://bugzilla.gnome.org/show_bug.cgi?id=611211

diff --git a/js/ui/lookingGlass.js b/js/ui/lookingGlass.js
index 783d3ef0f96aaafe0b48b1c8f0cfd6bb353ffc9a..403324b5fa35a4d93fe27fe022a870bf241e6511 100644 (file)
--- a/js/ui/lookingGlass.js
+++ b/js/ui/lookingGlass.js
@@ -295,7 +295,14 @@ Inspector.prototype = {
             let target = global.stage.get_actor_at_pos(Clutter.PickMode.ALL,
                                                        stageX,
                                                        stageY);
-            displayText.text = '<inspect x: ' + stageX + ' y: ' + stageY + '> ' + target;
+            let id, style_class;
+            if (target instanceof St.Widget) {
+                id = target.get_theme_node().get_element_id();
+                style_class = target.get_theme_node().get_element_class();
+            }
+            let position = '<inspect x: ' + stageX + ' y: ' + stageY + '>';
+            let style = '<style id: ' + id  + ' class: ' + style_class + '>';
+            displayText.text = position + ' ' + style + ' ' + target;
             if (borderPaintTarget != null)
                 borderPaintTarget.disconnect(borderPaintId);
             borderPaintTarget = target;